<template>
  <div>
    <div class="login">
      <h1>出库管理系统</h1>
      <div>
        <!-- 内容输入 -->
        <div class="form">
          <ul>
            <li>
              <div>
                <img class="account" src="@/assets/zhanghao.png" alt="" />
              </div>
              <input
                type="text"
                v-model="params.username"
                placeholder="请输入账号"
              />
            </li>
            <li>
              <div>
                <img class="password" src="@/assets/mima.png" alt="" />
              </div>
              <input
                type="password"
                v-model="params.password"
                placeholder="请输入密码"
              />
            </li>
          </ul>
        </div>
        <!-- 按钮 -->
        <div class="buttonBox">
          <van-button
            class="button"
            block
            round
            type="primary"
            loading-text="登录中..."
            :loading="logining"
            @click="postLogin"
            >登录</van-button
          >
        </div>
        <!-- 忘记密码和验证 -->
        <div class="text">
          <p>忘记密码</p>
          <p>验证登录</p>
        </div>
        <!-- 用户注册 -->
        <div class="registration">
          <p>注册用户</p>
          <img src="@/assets/more.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import Vue from "vue";
import { Button, Toast } from "vant";
import { login } from "@/services/api";
import { doSm3AndSm2Encrypt } from "@/utils/encryption";
Vue.use(Button);
export default {
  data() {
    return {
      params: {
        grant_type: "password",
        username: "dmsp",
        password: "123456",
      },
      logining: false,
    };
  },
  created() {
    window.localStorage.clear();
  },
  methods: {
    postLogin() {
      this.logining = true;
      if (this.logining) {
        login({
          ...this.params,
          password: doSm3AndSm2Encrypt(this.params.password),
        }).then(
          (res) => {
            this.logining = false;
            if (res.access_token) {
              window.localStorage.setItem("token", res.access_token);
              this.$router.push("/");
            }
          },
          (err) => {
            Toast("账号或密码错误");
            this.logining = false;
          }
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("./../assets/login_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;

  & > h1 {
    font-size: 27px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 38px;
    margin: 95px auto;
    font-weight: normal;
    text-shadow: 0px 2px 3px #3c738c;
  }
  & > div {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .form {
      width: 100%;
      overflow: hidden;
      & > ul {
        list-style: none;
        overflow: hidden;

        & > li {
          width: 100%;
          padding: 15px 0;
          box-sizing: border-box;
          margin-bottom: 20px;
          border-bottom: 2px solid #eeeeee;

          & > div {
            width: 15%;
            display: inline-block;
            vertical-align: middle;

            img.account {
              width: 20px;
              margin: auto;
              display: block;
            }

            img.password {
              width: 15px;
              margin: auto;
              display: block;
            }
          }

          input {
            display: inline-block;
            width: 85%;
            height: 40px;
            font-size: 17px;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
            outline: none;
            border: none;
            background-color: rgba(0, 0, 0, 0);
          }

          input::-webkit-input-placeholder {
            color: #ffffff;
          }

          input:-moz-placeholder {
            color: #ffffff;
          }

          input::-moz-placeholder {
            color: #ffffff;
          }

          input:-ms-input-placeholder {
            color: #ffffff;
          }
        }
      }
    }

    .buttonBox {
      width: 100%;
      margin-top: 30px;

      .button {
        background-color: #fff;
        border-radius: 23.5px;
        color: #f29d12;
      }
    }

    .text {
      width: 100%;
      display: flex;
      padding: 0 40px;
      box-sizing: border-box;
      justify-content: space-between;
      margin: 30px 0;
      display: none;

      p {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 17px;
      }
    }

    .registration {
      width: 100%;
      margin-top: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      display: none;
      p {
        font-size: 15px;
        font-weight: 500;
        color: #ffffff;
        line-height: 22px;
      }
      img {
        width: 20px;
        margin-left: 5px;
      }
    }
  }
}
</style>